<!--配送商端-销售管理-批发销售订单列表-收货-->
<template>
  <div class="warehousing">
    <el-container class="pending-box">
      <!-- 列表 -->
      <el-header height="auto">
        <RecordInfo
          :record-form="recordFormDetail"
          :record-data="dataInfo" />
        <!-- 搜索模块 -->
        <!-- tab搜索 -->
        <tabs
          :tabs-arr="sweepCodeTab"
          class="tabs-part"
          @returnIndex="sweepCodeTabHandle" />
        <el-form
          ref="formInlineRef"
          :inline="true"
          :model="customdata"
          :label-width="labelWidth"
          class="search-form"
        >
          <el-form-item
            label="扫码收货"
            prop="udi">
            <el-input
              ref="listInput"
              @change="searchForm"
              v-model="customdata.udi"
              class="width-limit"
              placeholder="请扫描产品条码"
            />
          </el-form-item>
          <el-form-item
            label="产品编码"
            prop="itemCode">
            <el-input
              v-model="customdata.itemCode"
              class="width-limit"
              placeholder="扫描或输入产品编码"
            />
          </el-form-item>
          <el-form-item
            label="产品名称"
            prop="nameCn">
            <el-input
              v-model="customdata.nameCn"
              class="width-limit"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="searchForm">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        :empty-text="emptyText"
        v-loading="tableLoading"
        ref="multipleTable"
        :data="getList"
        :columns="pendingAddColumnsArr"
        class="hospital-edit-box"
        height="200"
      >
        <template
          slot="default-operation"
          slot-scope="scope">
          <el-button
            v-if="itemStatus === 0"
            type="text text-primary"
            size="small"
            @click="goPending(scope.row)"
          >去收货</el-button>
          <el-button
            v-if="itemStatus === 1"
            type="text text-primary"
            size="small"
            @click="reSweepCode(scope.row)"
          >重新扫码</el-button>
        </template>
        <template
          slot="default-sweepCount"
          slot-scope="scope">
          <!-- :disabled="Number(scope.row.sweepCount) === 0" -->
          <el-button
            type="text text-primary"
            size="small"
            @click="toLookSweepCodeInfo(scope.row)"
          >{{ scope.row.sweepCount }}</el-button>
        </template>
        <template
          slot="default-registrationNumber"
          slot-scope="scope">
          <el-button
            :disabled="!scope.row.registrationNumber||!scope.row.registrationNumberId"
            v-html="regisNoButton(scope.row, 'registration')"
            @click="showPdfRegistion(scope.row.registrationNumberId)"
            type="text"
          />
        </template>
      </el-editable>
      <el-pagination
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-container>
    <!-- 收货操作 -->
    <el-dialog
      :visible.sync="handleVisible"
      title="收货操作"
      width="75%"
      class="edit-form handle-box">
      <div>
        <el-container class="handle-box">
          <tabs
            :tabs-arr="tabArr"
            @returnIndex="handletabs"
            :active-index="1" />
          <!-- 扫码 -->
          <el-header
            height="auto"
            class="topfrom">
            <el-form
              ref="form"
              @submit.native.prevent
              :model="handleFormData"
              label-width="90px">
              <el-form-item label="扫描条码">
                <el-input
                  ref="qrcodeInput"
                  v-model="handleFormData.barcode"
                  placeholder="解码信息：此处显示扫码解析出的解码信息"
                  @change="inputChange"
                />
              </el-form-item>
            </el-form>
          </el-header>
          <!-- 产品 -->
          <el-editable
            v-loading="handleVisibleLoading"
            :data="getHandleList"
            :columns="handlelistColumns"
            class="hospital-edit-box handle-edit-box"
            height="200"
          >
            <!-- 已扫码数量 -->
            <template
              slot="default-sweepCount"
              slot-scope="{row}">
              <span>{{ sweepCode }}</span>
            </template>
          </el-editable>
        </el-container>
        <h3 class="udi-title">物品详情</h3>
        <el-editable
          v-loading="handleVisibleLoading"
          :data="itemList"
          :columns="handleitemColumns"
          class="sweep-code-box"
          height="200"
        >
          <!-- 主码 -->
          <template
            slot="default-barCode"
            slot-scope="scope">
            <el-input
              v-model="itemList[scope.$index].barCode"
              placeholder="请输入" />
          </template>
          <!-- 生产日期 -->
          <template
            slot="default-productDate"
            slot-scope="scope">
            <el-date-picker
              v-model="itemList[scope.$index].productDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </template>
          <!-- 失效日期 -->
          <template
            slot="default-expDate"
            slot-scope="scope">
            <div>
              <el-date-picker
                v-model="itemList[scope.$index].expDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </div>
          </template>
          <!-- 批号 -->
          <template
            slot="default-productBatch"
            slot-scope="scope">
            <el-input
              v-model="itemList[scope.$index].productBatch"
              placeholder="请输入" />
          </template>
          <!-- 序列号 -->
          <template
            slot="default-serialNumber"
            slot-scope="scope">
            <el-input
              v-model="itemList[scope.$index].serialNumber"
              placeholder="请输入" />
          </template>
          <!-- udi -->
          <template
            slot="default-udi"
            slot-scope="scope">
            <el-input
              v-model="itemList[scope.$index].udi"
              placeholder="请输入" />
          </template>
          <!-- 数量 -->
          <template
            slot="default-num"
            slot-scope="{row}">
            <el-input
              v-model.number="row.num"
              type="number"
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
              placeholder="请输入"
            />
          </template>
          <template
            slot="default-action"
            slot-scope="scope">
            <el-button
              v-if="itemList.length === Number(scope.$index) + 1"
              size="small"
              @click.stop="addEmptyRow(scope.row)"
              type="text text-primary"
            >添加</el-button>
            <el-button
              v-if="itemList.length != 1"
              size="small"
              type="text text-danger"
              @click.stop="deleteList(scope.$index)"
            >删除</el-button>
          </template>
        </el-editable>
      </div>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button @click="cancelsub">取消</el-button>
        <el-button
          type="primary"
          @click="onSubmit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="扫码记录"
      :visible.sync="showLookSweepCode"
      width="75%">
      <el-editable
        :data="lookSweepCodeData"
        :columns="handlelistColumns"
        style="margin-bottom:20px;"
        v-loading="sweepCodeLoading"
      />
      <el-editable
        :data="lookSweepCodeDataInfo"
        :columns="pendingAddColumnsbox"
        height="400" />
      <el-pagination
        align="right"
        :current-page="sweepCodePageSize.curPage"
        :page-sizes="sweepCodePageSize.PAGE_NUMBER"
        :page-size="sweepCodePageSize.pageSize"
        :layout="sweepCodePageSize.PAGINATION_LAYOUT"
        :total="sweepCodePageSize.totalElements"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  recordFormDetail,
  pendingAddColumns,
  pendingAddColumnsbox,
  handleitemColumns,
  sweepCodeTab
} from './receiving'
import {
  showPdfRegistion,
  regisNoButton
} from './const'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import {
  getNeedStayItem, // 待扫码11
  bindingBarcode, // 反绑11
  saveNeedDistributor, // 提交11
  scanBarcodeGetItemInfoNoError, // 扫码11
  needItemDistributor, // 扫码信息不分页11
  queryNeedRestart, // 重新扫码
  needConfirmDeliver, // 确认收货11
  hossynPssPsOrderYyPssPsNeedOrderGetById, // 订单基本信息11
  getNeedAlreadyItem, // 已扫码11
  purchaseItemDistributorTempPageBean// 查看扫码记录11
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import { cloneDeep, isObject, debounce } from 'lodash'
import tabs from '@components/tabs/index.vue'
import { formatDate } from '@const/filter.js'
import RecordInfo from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/record'
export default {
  components: { ElEditable, SearchForm, tabs, RecordInfo },
  data () {
    return {
      emptyText: '暂无数据',

      readId: this.$route.query.id, // 详情ID
      dataInfo: {}, // 订单基本信息
      recordFormDetail, // 订单基本信息字段

      sweepCodeTab, // tab搜索字段
      itemStatus: 0, // tab搜索字段的值

      labelWidth: '100px',
      customdata: {
        udi: '',
        itemCode: '',
        nameCn: ''
      }, // 搜索字段

      tableLoading: false, // 表格Loading
      pendingAddColumns, // 产品表头
      pendingAddColumnsArr: pendingAddColumns,
      getList: [], // 表格数据

      handleVisible: false, // 弹窗内容===
      handleVisibleLoading: false, // 弹窗内容===
      handlelistColumns: [], // 上边表头
      getHandleList: [], // 上边列表
      handleitemColumns, // 下面表头
      itemList: [], // 下面列表

      // tar数组
      tabArr: [{ lab: '短码', val: 0 }, { lab: '长码', val: 1 }],
      tabIndex: 0, // 选中的tab
      // 扫码表单数据
      handleFormData: {
        barcode: ''
      },

      sweepCode: 0,
      //   --扫码相关---
      numCurIdx: null, // 当前正在修改的数量的下标
      longBarcode: true, // 长短码标志长码true 短码false
      countFlag: 0,
      mainCode: '', // 主条码
      secondCode: '', // 附属条码

      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER['0'],
      totalElements: 0,

      // 内部内容表头--用来查看扫码记录
      pendingAddColumnsbox,
      sweepCodeHistory: [], // 扫码历史
      showLookSweepCode: false,
      lookSweepCodeData: [],
      lookSweepCodeDataInfo: [],
      sweepCodeLoading: false,
      sweepCodePageSize: {
        curPage: 1,
        PAGE_NUMBER,
        PAGINATION_LAYOUT,
        pageSize: PAGE_NUMBER['0'],
        totalElements: 0
      },

      defaultData: {
        barCode: '', // 主码
        productDate: '', // 生产日期
        expDate: '', // 失效日期
        productBatch: '', // 产品批号
        serialNumber: '', // 序列号
        udi: '',
        num: '' // 数量
      },
      // 1-待确认，2-待发货，3-部分发货，5-已完成，6-拒绝配送，4-全部发货,7已撤销,8-待质检，9-待收货，10-待供应商发货
      infoStatus: {
        1: '待确认',
        2: '待收货',
        3: '部分收货',
        4: '已完成',
        5: '拒绝配送',
        6: '全部发货',
        7: '已撤销',
        8: '待质检',
        9: '待收货',
        10: '待供应商发货'
      }
    }
  },
  computed: {
    productItemId () {
      return this.getHandleList[0].authProdId
    }
  },
  watch: {
    itemList: {
      handler (nv, ov) {
        let num = 0
        nv.forEach(item => {
          num += Number(item.num)
        })
        this.sweepCode = num
      },
      deep: true
    },
    'handleFormData.barcode': {
      handler (nv, ov) {
        if (nv) {
          debounce(this.inputChange, 1000)
        }
      }
    },
    'customdata.mainCode': {
      handler (nv, ov) {
        if (nv) {
          debounce(this.searchForm, 1000)
        }
      }
    }
  },
  mounted () {
    // 获取产品列表
    this.list()
    this.getInfo()
    // 初始化按钮
    this.buttonMethod()
    this.$refs.listInput.focus()
  },

  methods: {
    regisNoButton,
    showPdfRegistion,
    // 获取订单基本信息
    getInfo () {
      this.$axios
        .$post(hossynPssPsOrderYyPssPsNeedOrderGetById, {
          id: this.readId // 采购订单ID
        })
        .then(res => {
          this.dataInfo = res.payload || {}
          this.dataInfo.orderStatus = this.infoStatus[res.payload.orderStatus]
        })
    },
    // 点击已扫码查看扫码记录
    toLookSweepCodeInfo (e) {
      // 处理表头
      let colums = cloneDeep(this.pendingAddColumns)
      colums.splice(16, 1)
      colums.splice(0, 1)
      this.handlelistColumns = colums

      this.lookSweepCodeData = e ? [e] : []
      this.sweepCodeLoading = true
      this.showLookSweepCode = true
      let data = {
        // type: 0,
        id: e.id,
        page: this.sweepCodePageSize.curPage,
        pageSize: this.sweepCodePageSize.pageSize
      }
      this.$axios.$post(purchaseItemDistributorTempPageBean, data).then(res => {
        let resData = res.payload || {}
        this.lookSweepCodeDataInfo = resData.content || []
        this.sweepCodePageSize.totalElements = resData.totalElements
      })
        .finally(() => {
          this.sweepCodeLoading = false
        })
    },
    // 重新扫码
    reSweepCode (row) {
      this.$axios
        .$post(queryNeedRestart, {
          id: row.id
        })
        .then(res => {
          if (res.code === '0') {
            this.list()
          }
        })
    },
    //  搜索
    searchForm () {
      this.curPage = 1
      this.list()
    },
    /**
     * @param {Object} condition | 组件自带
     * 搜索功能-点击重置
     */
    resetForm (condition) {
      this.curPage = 1
      this.$refs.formInlineRef.resetFields()
    },

    handletabs (index) {
      // 扫描条码自动获取焦点
      this.$refs.qrcodeInput.focus()

      if (index === 0) {
        this.longBarcode = false
        // 每次选择短码时，重置countFlag
        this.countFlag = 0
      } else {
        this.longBarcode = true
      }
      this.handleFormData.barcode = ''
    },
    // 根据扫码得到的数据查询接口，得到数据后添加到table列
    inputChange () {
      if (this.longBarcode) {
        this.mainCode = this.handleFormData.barcode
        this.secondCode = ''
      } else {
        // 若为短码时，由于要输入两次，所以设置一个flag计数器
        // 若countFlag为0，则设置主条码，否则设置附属条码
        if (this.countFlag === 0) {
          this.mainCode = this.handleFormData.barcode
          this.countFlag++
        } else {
          this.secondCode = this.handleFormData.barcode
        }
      }
      this.getItemInfo()
    },
    getItemInfo () {
      const postData = {
        productItemId: this.productItemId,
        longBarcode: this.longBarcode,
        mainCode: this.mainCode,
        secondCode: this.secondCode
      }
      this.$axios
        .$post(scanBarcodeGetItemInfoNoError, postData)
        .then(res => {
          if (!res.payload) {
            // 如果没有返回信息就继续扫
            this.handleFormData.barcode = ''
            this.$refs.qrcodeInput.focus()
          } else {
            // 有返回，就将信息填充到表格中
            const itemInfo = res.payload
            let resetItemInfo = {
              serialNumber: itemInfo.serialNo, // 序列号
              barCode: itemInfo.mainCode, // 主码
              productBatch: itemInfo.batchNo, // 批号
              productDate: itemInfo.productDate, // 生产日期
              expDate: itemInfo.expDate // 失效日期
            }
            const item = {
              ...itemInfo,
              ...resetItemInfo,
              num: 1
            }
            if (this.itemList.length > 0) {
              // 这里需要做下逻辑判断，如果是重复的数据，则找到该数据，给数量加一，否则，加入到数组中
              var existItem = this.itemList.find((it, idx) => {
                return (
                  it.barCode === item.barCode &&
                  it.productBatch === item.productBatch &&
                  it.productDate === item.productDate &&
                  it.serialNumber === item.serialNumber &&
                  it.udi === item.udi &&
                  it.expDate === item.expDate
                )
              })
              // 获取当前的数据的下标
              var existItemIndex = this.itemList.findIndex((it, idx) => {
                return (
                  it.barCode === item.barCode &&
                  it.productDate === item.productDate &&
                  it.expDate === item.expDate &&
                  it.productBatch === item.productBatch &&
                  it.serialNumber === item.serialNumber &&
                  it.udi === item.udi
                )
              })
              if (existItem) {
                existItem.num += 1
                this.numCurIdx = existItemIndex
              } else {
                // -----过滤掉空的数据-----
                let arr = this.itemList
                let codeInfo = []
                arr.forEach(item => {
                  if (
                    item.barCode ||
                    item.productDate ||
                    item.expDate ||
                    item.productBatch ||
                    item.serialNumber ||
                    item.udi
                  ) {
                    codeInfo.push(item)
                  }
                })
                // ---------------------
                this.itemList = codeInfo
                this.itemList.push(item)
                this.numCurIdx = this.itemList.length
              }
            } else {
              this.itemList.push(item)
              this.numCurIdx = this.itemList.length
            }
            // 如果获取到了正确数据，那么清空所有字段
            this.handleFormData.barcode = ''
            this.mainCode = ''
            this.secondCode = ''
            this.countFlag = 0
          }
        })
        .catch(e => {
          // 如果报错
          this.handleFormData.barcode = ''
          this.$refs.qrcodeInput.focus()
          this.mainCode = ''
          this.secondCode = ''
          // 且重置countFlag
          this.countFlag = 0
        })
        .finally(() => {})
    },

    // 选择完条码提交 幸福
    onSubmit () {
      if (
        Number(this.sweepCode) > Number(this.getHandleList[0].awaitSendNum)
      ) {
        this.$message({ type: 'warning', message: '扫码数量不能大于待收货数量!' })
        return false
      }
      let itemList = cloneDeep(this.itemList)
      //   批号、数量必填
      let isEveryItem = this.itemList.every(item => {
        return item.productBatch && item.num
      })
      if (!isEveryItem) {
        this.$message({ type: 'warning', message: '请填写必填项！' })
        return
      }
      //   校验生产日期有效期
      const dateInfo = this.itemList.map((it, index) => {
        if (it.expDate < it.productDate) return index + 1
      })
      let hasIndex = dateInfo.filter(it => {
        return !(!it || it === '')
      })
      if (hasIndex.length > 0) {
        return this.$message.warning(
          `第${hasIndex.join(',')}行有效期不能小于生产日期`
        )
      }

      // 提交扫码参数
      let objList = itemList.map(item => {
        return {
          authProdId: this.getHandleList[0].authProdId,
          distributeType: 1, // 订单类别（1-批发 2-寄售）
          orderItemId: this.getHandleList[0].id,
          receiveItemId: this.dataInfo.id,
          barCode: item.barCode,
          productDate: item.productDate,
          expDate: item.expDate,
          productBatch: item.productBatch,
          serialNumber: item.serialNumber,
          udi: item.udi,
          num: item.num

        }
      })

      //   主码和产品绑定的参数
      let bindList = []
      let objCode = {
        authItemId: this.getHandleList[0].authProdId,
        barCodeList: itemList.map(item => item.barCode),
        barcodeType: 1 // 1:GS1 2:HIBC
      }
      bindList.push(objCode)

      this.$axios
        .$post(bindingBarcode, { bindingList: bindList })
        .then(resdata => {
          this.$axios
            .$post(saveNeedDistributor, objList)
            .then(res => {
              this.$message({ type: 'success', message: '提交成功' })
              this.handleVisible = false
              // this.itemList = [cloneDeep(this.itemObj)]
              this.list()
            })
            .finally(res => {})
        })
    },

    // 获取产品列表
    list () {
      this.tableLoading = true
      Object.keys(this.customdata).forEach(key => {
        this.customdata[key] = this.customdata[key].trim()
      })
      const postData = {
        ...this.customdata,
        id: this.readId, // 采购订单ID
        page: this.curPage,
        pageSize: this.pageSize
      }
      let url = ''
      if (Number(this.itemStatus) === 0) {
        url = getNeedStayItem
      } else {
        url = getNeedAlreadyItem
      }
      // 请求列表数据
      this.$axios
        .$post(url, postData)
        .then(res => {
          let data = res.payload || {}
          //   赋值列表
          this.getList = data.content || []
          this.totalElements = data
            ? data.totalElements
            : 0
          // 如果是扫码或者是搜索才会显示弹框
          if (this.customdata.udi || this.customdata.itemCode || this.customdata.nameCn) {
            if (this.getList.length === 1 && Number(this.itemStatus) === 0) {
              this.goPending(this.getList[0])
              this.customdata = {
                udi: '',
                itemCode: '',
                nameCn: ''
              }
            }
          }
          // 如果列表为空并且状态是待扫码，emptyText=“发（收）货完成”
          if (this.getList.length === 0 && Number(this.itemStatus) === 0) {
            this.emptyText = '收货完成'
          } else {
            this.emptyText = '暂无数据'
          }
          this.tableLoading = false
        })
        .finally(res => {
          this.tableLoading = false
        })
    },

    // 初始化按钮
    buttonMethod () {
      let arr = [
        { type: 'button', val: '返回', handle: this.back },
        { type: 'primary', val: '确定收货', handle: this.submission }
      ]
      const btn = {
        type: 'btn',
        arr: arr
      }
      this.$store.commit('changeLayoutHandle', btn)
    },

    // 确定收货
    submission () {
      let body = {
        id: this.readId
      }
      // 请求列表数据
      this.$axios
        .$post(needConfirmDeliver, body)
        .then(res => {
          this.$message({ type: 'success', message: '收货成功！' })
          this.back()
        })
        .finally(res => {})
    },
    // 返回
    back () {
      this.$router.go(-1)
    },
    // 去收货
    goPending (item) {
      this.getHandleList = [item] || []
      this.itemList = []
      this.handleVisibleLoading = true

      // 处理一下表头
      let colums = cloneDeep(this.pendingAddColumns)
      colums.splice(16, 1)
      colums.splice(0, 1)
      this.handlelistColumns = colums
      this.handleVisible = true
      // 走获取扫码记录的接口
      let data = {
        id: item.id
      }
      this.$axios
        .$post(needItemDistributor, data)
        .then(res => {
          let resData = res.payload || []

          this.$nextTick(() => {
            if (resData.length !== 0) {
              this.itemList = resData.map(item => {
                return {
                  barCode: item.barCode,
                  productDate: item.productDate,
                  expDate: item.expDate,
                  productBatch: item.productBatch,
                  serialNumber: item.serialNumber,
                  udi: item.udi,
                  num: item.num
                }
              })
            } else {
              let obj = cloneDeep(this.defaultData)
              this.itemList.push(obj)
            }
          })
        })
        .finally(() => {
          this.handleVisibleLoading = false
        })
      //   弹框的“扫描条码”自动获取焦点
      this.$nextTick(() => {
        this.$refs.qrcodeInput.focus()
      })
    },
    // 未扫码、已扫码tab
    sweepCodeTabHandle (e) {
      this.itemStatus = e
      this.$refs.listInput.focus()
      this.list()
    },
    // 添加行
    addEmptyRow () {
      let data = cloneDeep(this.defaultData)
      this.itemList.push(data)
    },

    // 删除一行
    deleteList (index) {
      this.itemList.splice(index, 1)
    },

    // 关闭弹窗
    cancelsub () {
      this.handleVisible = false
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }
}
</script>

<style lang="less">
.warehousing {
  .pending-box {
    height: 100%;
    overflow: auto;

    .formToptext {
      .el-form-item {
        .textBox {
          width: 220px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .el-form-item__label {
        padding-right: 10px;
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }

  .handle-box {
    .sweep-code-box {
      .has-gutter {
        tr th:nth-child(5),
        th:nth-child(8) {
          position: relative;

          ::before {
            position: absolute;
            content: '*';
            color: red;
            top: 0;
            left: 0;
          }
          .no-required {
            &::before {
              content: '';
            }
          }
        }
      }
    }
    .handle-edit-box {
      margin-bottom: 20px;
    }

    .buttonBox {
      text-align: right;
      margin: 30px 0 20px;
    }
    .topfrom {
      .el-form-item {
        display: inline-block;
      }

      .el-input {
        width: 297px;
      }
    }
  }
  //去掉输入的的上下可加减数量的小三角
  input[type='number'] {
    -moz-appearance: textfield;
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .udi-title {
    padding-bottom: 10px;
  }
}
</style>
